<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的使用</title>
</head>
<body>
<!--1、表单的使用，重点掌握
        表单就是html界面用来搜集用户信息的所有元素的集合，然后把这些信息发送给服务器
            应用场景1：界面登录，用户名，密码输入等
-->
<!--form 标签就是表单的标签
            input type = text     ：文本输入框  value设置默认显示的内容
            input type = password ：密码输入框  value设置默认显示的内容
            input type = radio    : 单选框      name属性可以对其进行分组，每个组内的选择保持互斥； checked=“checked”表示默认选中、
            input type = checkbox : 复选框      checked = “checked”表示默认选中
            input type = reset    : 重置按钮    value可以修改按钮上的文本
            input type = submit   ：提交按钮    value可以修改按钮文本
            input type = button   ：按钮        value同上
            input type = file     ：文件上传
            input type = hidden   ：隐藏域      发送一些不想让用户看见的信息，但是它会发送数据给后端！

            select 标签下拉列表框
                option 选项中的参数 selected=“selected”设置默认选中

            textarea 标签表示多行文本输入，起始标签和结束标签之间的内容表示默认值
                rows  属性设置可以显示几行的高度
                clos  属性设置每行可以显示几个字符宽度


-->
<form>
    用户名称：<input type="text" value="默认值"/> <br/>
    用户密码：<input type="password" value="abc"/><br/>
    确认密码：<input type="password" value="abc"/><br/>
    性    别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女<br/>
    兴趣爱好：<input type="checkbox" checked="checked"/>Java <input type="checkbox" checked="checked"/>C++
    <input type="checkbox"/>others<br/>
    国    籍：<select>
    <option>--请选择国籍--</option>
    <option>1.外星人</option>
    <option selected="selected">2.中国</option> <!-- 默认选中项设置-->
    <option>3.美国</option>
</select><br/>
    自我评价：<br/><textarea rows="10" cols="20">这里的文本是默认显示，可设置默认显示内容</textarea><br/>
    <input type="reset"/>
    <input type="submit"/>
    <input type="reset" value="修改重置文本"/>
    <input type="submit" value="修改提交文本"/><br/>
    <input type="button" value="按钮内容可修改"/><br/>
    <input type="file"/><br/>
</form>

<hr/>
<h5>使用table标签对其进行美化-1：</h5>

<form>
    <table>
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性    别：</td>
            <td><input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女</td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" checked="checked"/>Java <input type="checkbox" checked="checked"/>C++
                <input type="checkbox"/>others</td>
        </tr>
        <tr>
            <td>国    籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option>1.外星人</option>
                <option selected="selected">2.中国</option> <!-- 默认选中项设置-->
                <option>3.美国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">这里的文本是默认显示，可设置默认显示内容</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td><input type="submit"/></td>
        </tr>
    </table>
</form>
<hr/>
<h5>使用table标签对其进行美化-2：</h5>
<h6>1.table标签上设置align=center属性</h6>
<h6>2.td标签上设置align=center属性</h6>
<h6>3.单选框点击圆圈和男女文字都会选上，因为增加了lable标签的使用</h6>
<form>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性    别：</td>
            <td><input type="radio" name="sex" checked="checked" id="man"/><label for="man">男</label>
                <input type="radio" name="sex" id="woman"/><label for="woman">女</label></td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" checked="checked"/>Java <input type="checkbox" checked="checked"/>C++
                <input type="checkbox"/>others</td>
        </tr>
        <tr>
            <td>国    籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option>1.外星人</option>
                <option selected="selected">2.中国</option> <!-- 默认选中项设置-->
                <option>3.美国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">这里的文本是默认显示，可设置默认显示内容</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

<hr/>

</body>
</html>